<template>
	<view>
		<view class="title">
			忘记<text>密码</text>
		</view>
		
		<view>
			<my-input :placeholder="'用户名'"
				:focus="true"
				:message="message.uMsg"
				@val="setUname">
				<u-icon name="account" size="45"></u-icon>
			</my-input>
			<my-input :placeholder="'密码'"
				:password="true"
				:message="message.npMsg"
				@val="setNewPassword">
				<u-icon name="lock" size="45"></u-icon>
			</my-input>
			<my-input :placeholder="'重复密码'"
				:password="true"
				:message="message.npaMsg"
				@val="setNewPasswordAgain">
				<u-icon name="lock-fill" size="45"></u-icon>
			</my-input>
		</view>
		
		<view style="margin-top: 50rpx;">
			<my-button @click.native="resetting">确认</my-button>
		</view>
	</view>
</template>

<script>
	import { mapMutations } from 'vuex'
	
	export default {
		data() {
			return {
				user: {
					username: '',
					newPassword: '',
					newPasswordAgain: ''
				},
				message: {
					uMsg: '',
					npMsg: '',
					npaMsg: ''
				}
			}
		},
		methods: {
			...mapMutations('user', ['setUsername']),
			// 名字重复改为Uname
			setUname(val) {
				this.user.username = val
			},
			setNewPassword(val) {
				this.user.newPassword = val
			},
			setNewPasswordAgain(val) {
				this.user.newPasswordAgain = val
			},
			resetting() {		
				this.$myRequest({
					url: '/sysUser',
					data: this.user,
					method: 'PUT'
				}).then(res => {
					const result =  res.data.result
					
					if (res.data.code == 200) {
						this.clearMsg()
					}
					
					// 错误消息
					if (result) {
						this.message.uMsg = 'username' in result ? result.username : ''
						this.message.npMsg = 'newPassword' in result ? result.newPassword : ''
						this.message.npaMsg = 'newPasswordAgain' in result ? result.newPasswordAgain : ''
						return
					}
					
					// 返回上一页
					this.setUsername(this.user.username)
					uni.redirectTo({
						url: "/pages/login/login?redirect=resetting"
					})
				})
			},
			clearMsg() {
				this.message.uMsg = ''
				this.message.npMsg = ''
				this.message.npaMsg = ''
			}
		}
	}
</script>

<style>
	page{
		background-color: #FFFFFF;
	}
	
	.title{
		margin-bottom: 50rpx;
		padding-top: 150rpx;
		font-size: 30px;
		font-weight: 700;
		text-align: center;
	}
	
	.title text{
		padding-left: 10rpx;
		color: #00b386;
	}
</style>
